﻿<h3 class="text-lg font-medium">Recovery codes</h3>
<div class="bg-primary-100 border-l-4 border-primary-500 text-primary-700 p-4" role="alert">
    <p class="font-semibold">
        Put these codes in a safe place.
    </p>
    <p>
        If you lose your device and don't have the recovery codes you will lose access to your account.
    </p>
</div>
<div class="grid grid-cols-1">
    @foreach (var recoveryCode in RecoveryCodes)
    {
    <div>
        <code class="block p-2 bg-primary-200 rounded">@recoveryCode</code>
    </div>
    }
</div>

@code {
    /// <summary>
    /// The recovery codes to show.
    /// </summary>
    [Parameter]
    public string[] RecoveryCodes { get; set; } = [];
}
